<template>
	<view class="refresh refreshCase" style="width: 100%;height: 100%;">
		<view
			class="loading"
			:class="[direct === 2 ? 'loadingDown' : '']"
			:style="{
				height: `${Math.abs(parseInt(move))}px`,
				opacity: `${Math.round(Math.abs(parseInt(move)) / 94)}`
			}"
		>
			<view v-if="loading" class="item flex_row_c hint"><text>悬停1秒即可刷新...</text></view>
			<view v-else class="item flex_row_c loading">
				<image
					src=""
					mode=""
				></image>
				<text>加载中...</text>
			</view>
		</view>
		<view class="refresh refreshOperator" :style="{ transform: `translate3d(0,${move},0)` }" @touchend="touchend" @touchstart="touchstart" @touchmove="touchmove">
			<scroll-view style="width:100%;height:100%;" scroll-y="true" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" @scroll="scroll"><slot /></scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		drop: {
			type: Boolean,
			default: true
		},
		pull: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			move: 0,
			loading: true,
			direct: 1
		};
	},
	mounted() {
		this.scrolltoupper();
	},
	methods: {
		scrolltoupper() {
			if (this.drop) this.direction = 1;
		},
		scrolltolower() {
			if (this.pull) this.direction = 2;
		},
		scroll(ev) {
			let scrollHeightAverage = ev.detail.scrollHeight / 2;
			ev.detail.scrollTop >= scrollHeightAverage ? (this.direction = !this.pull || 2) : (this.direction = !this.drop || 1);
			this.scrollHeightAverage = scrollHeightAverage;
		},
		touchstart(ev) {
			if (this.action) return;
			this.startY = ev.changedTouches[0].clientY;
			this.direct = this.direction;
		},
		touchmove(ev) {
			if (this.action) return;
			let moveY = ev.changedTouches[0].clientY,
				move = (moveY - this.startY) / 3,
				stand = 50,
				publicTime = stand => {
					this.action = true;
					this.move = `${stand}px`;
					clearTimeout(this.loadingTime);
					this.loadingTime = setTimeout(() => {
						this.loading = false;
						this.direct = this.direction;
						this.send(this.direction, stand);
						clearTimeout(this.loadingTime);
					}, 1000);
				};
			this.stand = stand;
			switch (this.direction) {
				case 1:
					if (!this.action && move >= stand) return publicTime(stand);
					if (!this.action && move > 0) this.move = `${move}px`;
					break;
				case 2:
					if (!this.action && move <= -stand) return publicTime(-stand);
					if (!this.action && move < 0) this.move = `${move}px`;
					break;
			}
		},
		touchend() {
			clearTimeout(this.loadingTime);
			if (this.loading) this.close();
		},
		send(direction, stand) {
			this.startY = 0;
			switch (direction) {
				case 1:
					this.move = `${stand}px`;
					this.$emit('dropOpen', () => {
						this.close();
					});
					break;
				case 2:
					this.move = `${stand}px`;
					this.$emit('pullOpen', () => {
						this.close();
					});
					break;
			}
		},
		close() {
			this.move = 0;
			setTimeout(() => {
				this.action = false;
				this.loading = true;
			}, 80);
		}
	}
};
</script>
<style lang="stylus">
.flex_row_c
	display flex
	align-items center
	justify-content center
.refreshCase
	position relative
	.loading
		position absolute
		top 0
		left 0
		width 100%
		transition all 0.2s
		z-index 1
		overflow hidden
		.item
			width 100%
			height 100%
		image
			width 16px
			height 16px
		text
			margin-left 4px
			font-size 30rpx
			color #666
	.loadingDown
		top auto
		bottom 0
		transform-origin bottom left
.refresh
	width 100%
	height 100%
	overflow hidden
	z-index 100
	transition all 0.08s
</style>
